<template name="beiwang">
	<view>
		<view class="block"  >
			<view class="header">
				<view class="xia">{{shuju.company}}——{{shuju.job}}</view>
			</view>
			<view class="information">
				<view>地点：{{shuju.place}}</view>
				<view style="color: #ff0000;">薪资：{{shuju.money}}</view>
			</view>
			<view class="moren">
				<view v-for="(item,index) in shuju.biande" :key="index" >
					<view class="row">
						<box :bian="item" @editBtn="editBtn" @cancelBtn="cancelBtn" @clickBtn="clickBtn(index)" :box-id="boxId(index)" :active-box="activeBox"></box>
						<view class="line"></view>	
					</view>
				</view>
				<view class="row">
					<view class="uni-input riqi" @click="add">添加</view>
				</view>				
			</view>
		</view>
	</view>
</template>

<script>
	
	
	import box from './box.vue';
	export default {
		name:"beiwang",
		props:['shuju', 'activeBox'],
		components:{
			box
		},
		data() {
			return {
				length:'',
				active: '',
				id: '',
				showDialog: false,
			}
		},
		computed:{
				listLength(item) {
					console.log(item)
					item.length=this.length
					return this.length
				},
				
		},
		methods: {
			add() {
				this.$emit('add')
			},
			boxId(index) {
				return  this.shuju.idd + '#' + index
			},
			checkActive() {
				
			},
			// 点击id
			clickBtn(index) {
				this.$emit("clickBtn", this.boxId(index))
			},
			// 取消全局id
			cancelBtn() {
				this.$emit("clickBtn", '')
			},
			// 编辑
			editBtn() {
				this.$emit("editBtn")
			}
		}
	}
</script>

<style>
.block{
	position:relative;//定位方式,相对定位
	/* margin: 5rpx 25rpx 35rpx 25rpx; */
	margin: 30rpx 0;
	border-radius: 25rpx;
	border: 1rpx solid #666FFC;
	height: 250rpx;
	background-color: #FFFFFF;
}
.header{
	background-color: #666FFC;
	border-radius:  25rpx 25rpx 0 0;	
	height: 50rpx;
	text-align: center;
	color: #FFFFFF;
	padding-top: 1.6%;
}
.information{
	display: flex;
	flex-direction: row;
	justify-content:space-between ;
	margin: 15rpx 30rpx 5rpx 30rpx;
	font-size: small;
}
.moren{
	margin-left: 25rpx;
	margin-top: 20rpx;
	display: flex;
	overflow-x: scroll;
	flex-direction: row;
}
::-webkit-scrollbar{
  display: none;
}
.row{
	display: flex;
	width: 140rpx;
	flex-direction: row;
}
.line{
	position: relative;
		width: 40rpx;
		height: 3rpx;
		background: #666FFC;
		margin-top: 33rpx;
}
.uni-input{
	border: 1rpx solid #666FFC;
	height: 50rpx;
	width: 100rpx;
	border-radius: 12rpx;
	line-height: 50rpx;
}
.riqi{
	font-size: smaller;
	text-align: center;
	margin-top: 8rpx;
}
</style>
